<template>
  <div class="todaydaiban">
    <!-- 今日需联系线索标签页 -->
    <div class="todayshare">
      <!-- 标签页 位置 -->
      <div class="dbox">
        <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
        </el-radio-group>
        <div class="tableshare">
          <el-container> </el-container>
          <el-tabs :tab-position="tabPosition" class="xbox">
            <div class="xla">
              <el-tab-pane label="今日需联系线索">
                <i class="el-icon-office-building">今日需联系线索</i>
              </el-tab-pane>
            </div>
            <el-tab-pane label="今日需联系客户"
              ><i class="el-icon-office-building">今日需联系客户</i>
            </el-tab-pane>
            <el-tab-pane label="今日需联系商机"
              ><i class="el-icon-phone">今日需联系商机</i></el-tab-pane
            >
            <el-tab-pane label="分配给我的线索"
              ><i class="el-icon-share">分配给我的线索</i></el-tab-pane
            >
            <el-tab-pane label="分配给我的客户"
              ><i class="el-icon-user-solid">分配给我的客户</i></el-tab-pane
            >
            <el-tab-pane label="待审核合同"
              ><i class="el-icon-s-order">待审核合同</i></el-tab-pane
            >
            <el-tab-pane label="待审核回款"
              ><i class="el-icon-s-order">待审核回款</i></el-tab-pane
            >
            <el-tab-pane label="待回款提醒"
              ><i class="el-icon-s-order">待回款提醒</i></el-tab-pane
            >
            <el-tab-pane label="即将到期的合同"
              ><i class="el-icon-s-order">即将到期的合同</i></el-tab-pane
            >
            <el-tab-pane label="待回访合同"
              ><i class="el-icon-s-order">待回访合同</i></el-tab-pane
            >
            <el-tab-pane label="待审核发票"
              ><i class="el-icon-s-order">待审核发票</i></el-tab-pane
            >
          </el-tabs>
          <!-- 待办下 右边内容  -->
          <div class="nowshare">
            <!-- 行内表单 -->
            <div>
              <el-form :inline="true" :model="formIn" class="demo-form-inline">
                <el-form-item>
                  <el-select v-model="formIn.user" placeholder="今日需联系">
                    <el-option label="已逾期" value="yiyuqi"></el-option>
                    <el-option label="已联系" value="yilianxi"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-select v-model="formIn.pads" placeholder="我的">
                    <el-option label="我下属的" value="woxiashude"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button class="saixuan" @click="gaojisaixuan = true"
                    ><i class="el-icon-s-data">高级筛选</i>
                  </el-button>
                </el-form-item>
                <el-form-item>
                  <el-button class="biaoji" :plain="true" @click="onSubmit"
                    ><i class="el-icon-s-flag"></i> 全部标记已处理</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <!-- 对话框 高级赛选 -->
            <div>
              <el-dialog title="高级筛选" :visible.sync="gaojisaixuan">
                <el-form :model="gaojiform">
                  <el-form-item label="筛选条件" :label-width="formLabel">
                    <el-select
                      v-model="gaojiform.pay"
                      placeholder="请选择要筛选的字段名"
                    >
                      <el-option label="商机名称"></el-option>
                      <el-option label="商户状态"></el-option>
                      <el-option label="商机状态组"></el-option>
                      <el-option label="商机金额"></el-option>
                      <el-option label="预计成交日期"></el-option>
                      <el-option label="备注"></el-option>
                      <el-option label="创建人"></el-option>
                      <el-option label="更新时间"></el-option>
                      <el-option label="创建时间"></el-option>
                      <el-option label="负责人"></el-option>
                      <el-option label="最后跟进时间"></el-option>
                      <el-option label="相关团队"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item :label-width="formLabel">
                    <el-input
                      v-model="gaojiform.name"
                      autocomplete="off"
                      placeholder="多个条件；隔开"
                    >
                      <i class="el-icon-circle-close"></i
                    ></el-input>
                  </el-form-item>
                </el-form>
                <div>
                  <input
                    type="text"
                    v-for="(item, i) of items"
                    v-model="items[i]"
                    :key="i"
                  />
                  <a href="#" style="color: #4f81fb" @click="addsaixuan"
                    >添加筛选条件</a
                  >
                </div>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="gaojisaixuan = false">取 消</el-button>
                  <el-button type="primary" @click="gaojisaixuan = false"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
            </div>
            <!-- 表格数据渲染 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "tab",
  components: {},
  data() {
    return {
      tabPosition: "left", //标签页靠左
      //
      formIn: {
        user: "",
        pads: "",
      },
      gaojiform: {
        name: "",
        pay: "",
      },
      items: [],
      // 控制  高级筛选弹框
      gaojisaixuan: false,
      formLabel: "100px",
    };
  },
  created() {},
  methods: {
    //全部标记
    onSubmit() {
      // message消息文字
      this.$message("已标记");
      // 点击会触发已标记 操作成功
      //   发送请求
    },
    // 给添加筛选条件 添加一个input框
    addsaixuan() {
      this.items.push("");
    },
    // 高级筛选
    // heightSubmit() {
    //   // 点击筛选 弹出弹框
    // },
  },
};
</script>
<style  scoped>
.dbox {
  background-color: rgb(230, 230, 230);
}
.xbox {
  background-color: #fff;
}
.todayshare {
  width: 100vw;
  height: 80vh;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  background-color: #fff;
}

.todaydaiban {
  width: 100%;
  height: 55vh;
  background-color: #e6e6e6;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
}

/* 右侧搜索栏 */
.nowshare {
  border-radius: 5px;
  margin: 30px 20px;
  position: absolute;
  top: 4rem;
  left: 15rem;
  display: flex;
  justify-content: center;
}
.saixuan {
  background-color: #2362fb;
  color: #fff;
  border: none;
}
.biaoji {
  background-color: #fff;
  color: #2362fb;
}
</style>
